<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>

</style>
<body>
    <div id="app">
      <p>{{time | times}}</p>
      <p>{{time | times('/')}}</p>
      <p>{{money | changeMoney}}</p>
    </div>
    <hr>
    
   
    <script src="./base/vue.js"></script>
    <script>
      // 过滤器： 数据格式化， 比如，后端返回我们的数据格式是一个时间戳，    243294224324
      //在页面中使用的时候需要变成真正的时间格式  2018-12-26   34.6  78.5

      // 分为两种：全局过滤器，局部过滤器

      //过滤器只是在数据要显示的时候，将数据变化成某种格式

      //全局过滤器  内部必须要写return
      //  Vue.filter("times", function (val) {
      //   let date = new Date(val);
      //   return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      // })

      new Vue({
        el:"#app",
        data:{
          time:Date.now(),
          money:12.5
        },
        filters:{//声明局部过滤器
          times(val,options="-"){
            let date = new Date(val)
            return date.getFullYear() + options + (date.getMonth() + 1)+ options + date.getDate();
          },
          changeMoney(money){ //12.5
            return "￥"+parseInt(money)
          }
        }
      });

    

     
    </script>
</body>
</html>